<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta
      name="format-detection"
      content="telephone=no,email=no,date=no,address=no"
    />
    <title>巡查</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
      html,
      body {
        background-color: #f5f6f6;
      }
      .content {
        margin-top: 10px;
      }
      .content td {
        border-bottom: 1px solid #dfe0e0;
        height: 60px;
      }
      .Add {
        height: 40px;
        width: 96%;
        background-color: #1abc9c;
        color: white;
        text-align: center;
        font-size: 15px;
        margin-top: 20px;
        outline: none;
      }
      .ywc {
        background-image: url(../image/yiwancheng.png);
        background-size: 105px;
        background-position: center;
        background-repeat: no-repeat;
      }
      .ycs {
        background-image: url(../image/ycs.png);
        background-size: 105px;
        background-position: center;
        background-repeat: no-repeat;
      }
      .renming {
        background-color: #72edd1;
        border: 1px solid #d0f9f0;
        padding: 10px 3px 10px 3px;
        color: #fff;
      }
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 领导角色巡查页面 -->
    <div class="content">
      <div
        id="container1"
        style="height: 200px; width: 100%; margin-top: 200px;"
      ></div>
    </div>
  </body>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
  <script src="../script/echarts.min.js"></script>
  <script type="text/javascript">
    apiready = function () {
      api.setRefreshHeaderInfo(
        {
          visible: true,
          bgColor: "rgba(0,0,0,0)",
          textColor: "#666",
          textDown: "下拉刷新",
          textUp: "释放刷新",
        },
        function (ret, err) {
          window.location.reload();
          api.refreshHeaderLoadDone();
        }
      );

      var session = $api.getStorage("userSession");
      var ret = $api.getStorage("selectpor");
    };
    var qiyeid = $api.getStorage("userSession").data.enterprise.id;
    var proId = $api.getStorage("userSession").data.proId;
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/enterprise/patrolCompleteByMonth.json",
      data: {
        enterpriseId: qiyeid,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        var dom3 = document.getElementById("container1");
        var myChart3 = echarts.init(dom3);
        var app3 = {};
        option3 = null;

        option3 = {
          title: {
            text: "巡查次数逐月统计",
            left: "center",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            orient: "vertical",
            data: ["完成", "未完成"],
            left: "right",
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              data: result.data.month,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "完成",
              type: "bar",
              color: "#60ACFC",
              data: result.data.com,
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "平均值" }],
              },
            },
            {
              name: "未完成",
              type: "bar",
              color: "#AFE39B",
              data: result.data.unCom,
              markPoint: {
                data: [
                  { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                  { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "平均值" }],
              },
            },
          ],
          grid: {
            left: "3%",
            right: "4%",
            bottom: "0%",
            top: "25%",
            containLabel: true,
          },
        };
        if (option3 && typeof option3 === "object") {
          myChart3.setOption(option3, true);
        }
      },
    });
  </script>
</html>
